<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>评测报告</title>

  <script src="/jquery.js"></script>

  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script src="/md5.js"></script>
  <script src="/vue.js"></script>
  <script src="/httpVueLoader.js"></script>

  <!-- 引入样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
  <script src="/axios.js"></script>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      min-width: 1200px;
    }

    .page-header {
      height: 50px;
    }

    .panel {
      margin-top: 200px;
      height: 648px;
      width: 1200px;
      margin: 0 auto;
      background-size: cover;
    }

    #panel-table {
      background-image: url('/fudian.png');
    }

    .panel-heading {
      height: 30%;
      padding: 3px;
    }

    .panel-body {
      height: 70%;
      padding: 3px
    }

    #mytable {
      margin: 0 auto;
      position: relative;
      top: 10%;
    }

    #mytable>tbody>tr>th,
    #mytable>tbody>tr>td {
      padding: 5px;
    }

    td>div>img {
      max-height: 390px;
    }

    .el-drawer__wrapper {
      width: 15%;
      text-align: center;
    }

    input[name="title"] {
      float: left;
      border: 0;
      height: 30px;
      font-size: 15px;
    }

    input[name="title"]:focus {
      outline: none;
    }



    #pictb>tbody>tr>td {
      border: solid 1px white;
      font-size: 13px;
    }


    .el-upload {
      margin: 0 auto;
      margin-top: 10px;
    }

    #myModal {
      height: 300px;
    }

    textarea {
      border: none;
      background-color: rgb(234, 239, 247);
    }

    textarea:focus {
      outline: none;
    }

    .el-image {
      margin: 10px;
    }

    .el-input__inner {
      background-color: transparent;
      border: 0;
      outline: 0;
      height: auto;
    }

    #selcontainer {
      width: 100%;
    }

    #ppt-title {
      font-size: 25px;
      background-color: transparent;
    }

    #mytable>tbody>tr>th,
    #mytable>tbody>tr>td {
      border: white solid 1px;
    }

    #mytable .el-input__inner {
      color: white;
    }
  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 120%;">
    <sidebar @changepage="changepage" ref="mysidebar" type="3"></sidebar>


    <div class="page-header">
      <el-button type="primary" style="position: absolute;right:20px;" @click="addColumn"
        :disabled="items.cols.length==4">新增一列</el-button>
      <el-button type="danger" style="position: absolute;right:130px;" @click="rmColumn"
        :disabled="items.cols.length==1">减少一列</el-button>
      <ul class="breadcrumb" style="text-align: center;">
        <li><a href="/">首页</a></li>
        <li>{{owner}}</li>
        <li>{{task_name}}</li>
        <li class="active">第
          <select v-if="$refs.mysidebar!=null" @change="selectpage" id="select-page" :value="currentPage">
            <option v-for="(t,i) in $refs.mysidebar.data" :value="i+1">{{i+1}}</option>
          </select>
          页
        </li>
      </ul>

    </div>

    <div class="panel panel-default" id="panel-table">
      <el-input id="ppt-title" v-model="items.title" placeholder="请输入标题" @change="autosave('title')"
        style="position:relative;top:7%;left:8%;width:90%;"></el-input>
      <table id="mytable" style="width: 90%;height:80%">
        <tr style="height:14%;">
          <th v-for="(col,i) in items.cols"
            :style="'min-width: 25%;background-color:'+(i>0?'rgb(255,153,0)':'rgb(10,135,208)')">
            <el-input placeholder="请输入内容" v-model="col.title" @change="autosave('col',i)"></el-input>
          </th>
        </tr>
        <tr id="img-row" style="height:80%;width:100%;background-color:rgb(242,242,242)">
          <td v-for="(item,i) in  items.cols"
            :style="'min-width: 25%;height:100%;background-color:'+(i>0?'rgb(255,153,0)':'rgb(242,242,242)')">
            <el-popover width="200" trigger="hover" title="确定要删除吗？" v-for="(pic,j) in item.imgs" :key="pic"
              placement="bottom">
              <el-button type="danger" @click="dropImg(i,j)">删除</el-button>
              <el-image style="width:230px;height:100%" fit="contain" :src="'/'+pic" :key="pic"
                :preview-src-list="['/'+pic]" slot="reference"></el-image>
              </el-image>

            </el-popover>

          </td>
        </tr>
        <tr>
          <td v-for="(item,i) in  items.cols">
            <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click=addPic(i) circle>
            </el-button>
          </td>
        </tr>
      </table>
    </div>

    <!--模态框 选择标签，上传图片-->
    <div class="modal fade" id="selcontainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
      <div class="modal-dialog" role="document" style="width: 100%;">
        <div class="modal-content" style="width: 95%;">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <div style="width:100%;text-align:center">
              <h4 class="modal-title" id="myModalLabel1">请选择</h4>
            </div>

          </div>
          <div class="modal-body" style="width: 100%;">
            <!-- column:第几列
                             index:第几张图片
                        -->
            <picupload :page="currentPage" :index="whichtoupload" :column="column" :type="3" style="width: 90%;"
              @disabled="setdisabled" @afterupload="changepage(currentPage)" position="upload" ref="myuploader">
            </picupload>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="upload"
              :disabled="disable_upload">上传</button>
          </div>
        </div>
      </div>
    </div>


  </div>
</body>

<script>
  const app = new Vue({
    el: '#main',
    components: {
      "picupload": httpVueLoader("/pics.vue"),
      "sidebar": httpVueLoader("/sidebar.vue")
    },
    data: {
      items: { title: '', advice: '', cols: [] },
      whichtoupload: 0,
      column: 0,
      currentPage: 1,
      disable_upload: true,
      task_name: null,
      owner: null,
    },
    created: function () {
      this.owner = decodeURI(window.location.pathname.split("/")[1]);
      this.task_name = decodeURI(window.location.pathname.split("/")[2]);
      this.changepage(1);
    },
    methods: {
      addColumn() {
        let col = this.items.cols.length;
        this.items.cols.push({ title: '', imgs: [] });
        axios.post(`${this.task_name}/addrmcol?p=${this.currentPage}&col=${col}&type=add`).then(res => {
          this.$message({
            type: 'success',
            message: '增加成功',
            duration: 1000
          });
        });
      },
      rmColumn() {
        this.items.cols.pop();
        let col = this.items.cols.length;
        axios.post(`${this.task_name}/addrmcol?p=${this.currentPage}&col=${col}&type=rm`).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1000
          });
        });

      },
      addtoend() {
        this.$refs.mysidebar.addtoend();
      },
      addPic(index) { //index是列数
        /*获取图片的index 从0开始*/
        if (!this.canAddPicCol(index)) {
          this.$message.error('列数已满，请上传的空白列或删除一列');
          return;
        }
        let td = $("#img-row").children().get(index);
        let num = $(td).children().length;
        this.whichtoupload = num;
        this.column = index;
        $("#selcontainer").modal();
      },
      setdisabled(val) {
        this.disable_upload = val;
      },
      upload() {
        this.$refs.myuploader.submitUpload();
        this.$message({
          type: 'success',
          message: '自动保存',
          duration: 1000
        });
      },
      changepage(value) {
        let task_type;
        if (document.title === '竞品分析')
          task_type = 1;
        else if (document.title === '特色化案例库')
          task_type = 2;
        else if (document.title === '评测报告')
          task_type = 3;
        axios.get(`${this.task_name}?p=${value}&type=${task_type}`).then(res => {
          this.items = res.data;
          if (this.items.cols == null || this.items.cols.length == 0) {
            this.items.cols = [{ title: '', imgs: [] }];
          }
          this.currentPage = value;
        })
      },
      autosave(str, col) {
        let url = `${this.task_name}/autosave?p=${this.currentPage}&type=3`;
        let data = ''
        if (str == 'title') {
          url += '&str=title';
          data = { data: this.items.title };
        } else if (str == 'col' && col != null) {
          url += `&str=col&col=${col}`;
          data = { data: this.items.cols[col].title };
        }
        $.ajax({
          type: 'POST',
          url,
          data,
          success: () => {
            this.$message({
              type: 'success',
              message: '自动保存',
              duration: 1000
            });
            this.changepage(this.currentPage);
            this.$refs.mysidebar.get_pages();
          }
        });
      },
      countPic() {
        let count = 0;
        for (let col of this.item.cols) {
          if (col.imgs == null)
            continue;
          for (let img of col.imgs) {
            count++;
          }
        }
        return count;
      },
      canAddPic() {
        let count = 0;
        let empty_col = 0;
        for (let col of this.items.cols) {
          if (col.imgs == null) {
            empty_col++;
            continue;
          }
          for (let img of col.imgs) {
            count++;
          }
        }
        if (count < 4)
          return true;
        else return false;
      },
      canAddPicCol(col) {
        /*
            能上传图片的条件:
            本列为空 或
            图片数+空列数<4
        */
        if (this.canAddPic() || this.items.cols[col].imgs == null || this.items.cols[col].imgs.length == 0)
          return true;
        return false;
      },
      selectpage() {
        this.changepage($("#select-page").val());
        this.$refs.mysidebar.changeItemColor($("#select-page").val());
      },
      dropImg(col, index) {
        axios.post(`${this.task_name}/rmimg?p=${this.currentPage}&col=${col}&index=${index}`).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功',
            duration: 1000
          });

          this.changepage(this.currentPage);
        });

      }
    },

  });
</script>

</html>